<template>
  <view class="container">
    <image src="/static/images/login/phone_bg.png" mode="scaleToFill" class="bg-st" />
    <view class=" phone-st">
      <view class="header-title">
        <view class="ch_title">有温度的乐器之家</view>
        <view class="en_title">A Home of Musical Instruments with Temperature</view>

      </view>
    </view>
    <view class="login-btns ">
      <view class="header-title">
        <view class="flex-center flex-align-items bg-main" @click="loginPhone">
          一键登录
        </view>
        <view class="flex-center flex-align-items " @click="toPath('/pages/login/login?type=2')">
          其他手机号登录
        </view>
      </view>
    </view>

    <view class="footArea x-flex-row-center">
      <checkbox-group @change="checkBoxChange">
        <checkbox value="cb" :checked="argementCheck" color="#2979ff" style="transform:scale(0.6)" />
      </checkbox-group>
      <text>我已阅读并同意</text>

      <text @click="toAgreement('agreement')">
        《用户使用协议》
      </text>
      <text @click="toAgreement('policy')">
        《隐私协议》
      </text>
    </view>

    <view v-if="agreementPopupShow && !isAgree" class="agreement-popup popup flex-center flex-align-items">
      <view class="main">
        <view class="main-title font-32-B">用户注册协议和隐私政策</view>
        <view class="main-content font-28-M">
          <view>请你务必审慎阅读、充分理解“用户注册协议”和“隐私政策”各条款，包括但不限于：为了更好的向你提供服务，我们需要收集你的设备标识、操作日志等信息用于分析、优化应用性能。</view>
          <view>本应用集成第三方的移动安全联盟 OAID：移动智能终端补充设备标识体系与 SDK
            严格遵守我国《网络安全法》、《数据安全法》和《电信和互联网用户个人信息保护规定》等相关法律法规和《信息安全技术
            个人信息安全规范》等国家标准要求。SDK 不会主动收集任何数据，只在 APP 调用时获取以下数据，用于本地判断，不会进行任何网络传输。
          </view>
          <view>你可阅读
            <text @click="toAgreement('agreement')">《用户注册协议》</text>和
            <text @click="toAgreement('policy')">《隐私政策》</text>
            了解详细信息。如果你同意，请点击下面按钮开始接受我们的服务。
          </view>
        </view>
        <view class="main-btns flex-between">
          <!-- 					<view class="font-28-M" @click="agreementPopupShow = false">拒绝</view>
					<view class="font-28-M" @click="agreementPopupShow = false">同意</view> -->
          <view class="font-28-M" @click="handleSuccess">拒绝</view>
          <view class="font-28-M" @click="handleSuccess(1)">同意</view>
        </view>
      </view>
    </view>

    <x-modal v-model="contractObj.isShow" :showBotton="contractObj.showBotton" :showOneBotton="contractObj.showOneBotton" :title="contractObj.title" @confirm="confirm" @cancel="cancel" :cancelText="contractObj.cancelText" :confirmText="contractObj.confirmText" :canColse="false">
      {{contractObj.content}}
    </x-modal>

  </view>
</template>

<script setup>
import {
  onShow,
  onShareAppMessage,
  onHide
} from '@dcloudio/uni-app';
import {
  ref
} from 'vue';
import config from '@/js/config.js';
import api from '@/api/index.js';
const argementCheck = ref(false)
const agreementPopupShow = ref(true);
const terminal = ref('weapp');
const otherLogin = ref(false);
const code = ref('');
const timer = ref(null);

const contractObj = ref(
  {
    title: '提示',
    content: '由于您发布虚假信息，账号已被封停3天预计解封时间为：2023年9月1日18时35分如有疑问请联系管理员',
    isShow: true,
    showBotton: false,
    cancelText: '取消',
    confirmText: '确认',
    showOneBotton: true
  }
);
const cancel = (e) => {
  contractObj.value.isShow = false
}

const confirm = (e) => {
  contractObj.value.isShow = false
}

// 微信不弹出弹窗
agreementPopupShow.value = false

const checkBoxChange = (e) => {
  argementCheck.value = !argementCheck.value
}

const handleBefore = (sign) => {
  if (!argementCheck.value) return uni.$u.toast("请勾选并查看用户和隐私协议")
  if (sign) {
    otherLogin.value = true
  }
}

// 点击同意下次不需要弹出
const handleSuccess = (sign) => {
  if (sign) {
    uni.setStorageSync('isAgree', true)
  }
  agreementPopupShow.value = false
}

// 跳转内页
const toPath = url => {
  uni.navigateTo({
    url
  });
}
//跳转首页
const toPathHome = url => {
  uni.reLaunch({
    url
  })
}

// 跳转协议
const toAgreement = type => {
  uni.navigateTo({
    url: `/pages/login/agreement?type=${type}`
  });
}
const getLoginCode = () => {
  return new Promise((resolve, reject) => {
    uni.login({
      provider: 'weixin', //使用微信登录
      success: res => {
        resolve(res);
      },
      fail: err => {
        reject(err)
      }
    });
  })
}
// APP手机号一键登录
const loginPhone = () => {
  if (!argementCheck.value) return uni.$u.toast("请勾选并查看用户和隐私协议")
  uni.preLogin({
    provider: 'univerify',
    success(res) { //预登录成功
      console.log('1111111')
      console.log(res)
      // 显示一键登录选项
      uni.login({
        provider: 'univerify',
        univerifyStyle: { // 自定义登录框样式
          //参考`univerifyStyle 数据结构`
          // "fullScreen": true, // 是否全屏显示，默认值： false
          "title": '快速登录',
          "backgroundColor": "#ffffff", // 授权页面背景颜色，默认值：#ffffff
          "icon": {
            "path": "../../static/images/logo.png" // 自定义显示在授权框中的logo，仅支持本地图片 默认显示App logo
          },
          "phoneNum": {
            "color": "#000000", // 手机号文字颜色 默认值：#000000
            "fontSize": "18" // 手机号字体大小 默认值：18
          },
          "slogan": {
            "color": "#8a8b90", //  slogan 字体颜色 默认值：#8a8b90
            "fontSize": "12" // slogan 字体大小 默认值：12
          },
          // 一键登录
          "authButton": {
            "normalColor": "#3479f5", // 授权按钮正常状态背景颜色 默认值：#3479f5
            "highlightColor": "#2861c5", // 授权按钮按下状态背景颜色 默认值：#2861c5（仅ios支持）
            "disabledColor": "#73aaf5", // 授权按钮不可点击时背景颜色 默认值：#73aaf5（仅ios支持）
            "textColor": "#ffffff", // 授权按钮文字颜色 默认值：#ffffff
            "title": "本机号码一键登录" // 授权按钮文案 默认值：“本机号码一键登录”
          },
          // 其他登录方式
          "otherLoginButton": {
            "visible": "false", // 是否显示其他登录按钮，默认值：true
            "normalColor": "#f8f8f8", // 其他登录按钮正常状态背景颜色 默认值：#f8f8f8
            "highlightColor": "#dedede", // 其他登录按钮按下状态背景颜色 默认值：#dedede
            "textColor": "#000000", // 其他登录按钮文字颜色 默认值：#000000
            "title": "密码登录", // 其他登录方式按钮文字 默认值：“其他登录方式”
            "borderWidth": "1px", // 边框宽度 默认值：1px（仅ios支持）
            "borderColor": "#c5c5c5" //边框颜色 默认值： #c5c5c5（仅ios支持）
          },
          // 自定义按钮登录方式
          // "buttons": { // 仅全屏模式生效，配置页面下方按钮  （3.1.14+ 版本支持）  
          // 	"iconWidth": "45px", // 图标宽度（高度等比例缩放） 默认值：45px  
          // 	"list": [{
          // 			"provider": "apple",
          // 			"iconPath": "/static/test.jpg", // 图标路径仅支持本地图片  
          // 		},
          // 		{
          // 			"provider": "weixin",
          // 			"iconPath": "/static/test.jpg",
          // 		}
          // 	]
          // },
          "privacyTerms": {
            "defaultCheckBoxState": "true", // 条款勾选框初始状态 默认值： true
            "textColor": "#8a8b90", // 文字颜色 默认值：#8a8b90
            "termsColor": "#1d4788", //  协议文字颜色 默认值： #1d4788
            "prefix": "我已阅读并同意", // 条款前的文案 默认值：“我已阅读并同意”
            "suffix": "并使用本机号码登录", // 条款后的文案 默认值：“并使用本机号码登录”
            "fontSize": "12", // 字体大小 默认值：12,
            "privacyItems": []
          }
        },
        success(res) { // 登录成功
          console.log('222222')
          console.log(res)
          // 客户端(调用云函数)  调用云函数来实现整个业务逻辑
          // 在得到access_token后，通过callfunction调用云函数
          uniCloud.callFunction({
            name: "getPhoneNumber",
            data: {
              'openid': res.authResult.openid,
              'access_token': res.authResult.access_token
            }
          }).then(res => {
            console.log('333333')
            console.log(res)
            return api.base.getOnlyMobileLogin({
              mobile: res.result.data.phoneNumber,
            }).then(res => {
              uni.closeAuthView()
              uni.setStorageSync('userinfo', res.data.userinfo);
              uni.setStorageSync('token', res.data.userinfo.token);
              uni.switchTab({
                url: '/pages/index/index'
              });
            });

          }).catch((err) => {
            // 执行失败
            uni.closeAuthView()
          })
        },
        // 当用户点击自定义按钮时，会触发uni.login的fail回调[点击其他登录方式，可以跳转页面]
        // 判断返回数据执行任意逻辑
        fail(res) { // 登录失败
          console.log('44444')
          console.log(res)
          uni.showToast({
            title: res.errCode + " " + res.errMs,
            icon: 'none'
          })
          console.log(res.errCode)
          console.log(res.errMsg)
          if (res.code == "30002") {
            console.log('密码登录');
          } else if (res.code == "30008") {
            console.log('自定义按钮登录方式');
          }
        }
      })
    },
    fail(res) { // 预登录失败
      // 不显示一键登录选项（或置灰）
      // 根据错误信息判断失败原因，如有需要可将错误提交给统计服务器
      console.log(res, '---------预登录失败');
      console.log(res.errCode)
      console.log(res.errMsg)
      uni.showToast({
        title: '暂时无法使用一键登录',
        icon: 'none'
      })
    }
  });
}


const isAgree = ref(false)
onShow(async () => {
  isAgree.value = uni.getStorageSync('isAgree') || false

  // #ifdef APP-PLUS
  const systemInfo = uni.getSystemInfoSync();
  if (systemInfo.system.search('IOS') > -1) {
    terminal.value = 'ios';
  } else {
    terminal.value = 'android';
  }
  // #endif
  if (uni.getStorageSync('userinfo') && uni.getStorageSync('userinfo').identity == 2) {
    uni.reLaunch({
      url: '/pagesB/tabbar/index'
    });
  } else if (uni.getStorageSync('userinfo') && uni.getStorageSync('userinfo').identity == 1) {
    // uni.switchTab({
    //   url: '/pages/tabbar/home'
    // });
  }

  // #ifdef MP-WEIXIN
  const res = await getLoginCode();
  code.value = res.code;
  timer.value = setInterval(async () => {
    const res = await getLoginCode();
    code.value = res.code;
  }, 200000);
  // #endif


});
onShareAppMessage(() => { });
onHide(() => {
  if (timer.value) {
    clearInterval(timer.value)
    timer.value = null;
  }
});
</script>

<style lang="less" scoped>
page {
  background: #fff;
}

.footArea {
  position: absolute;
  left: 0;
  bottom: 60px;
  width: 100vw;
  font-size: 28rpx;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #333333;
  line-height: 28rpx;
  text-align: center;

  text {
    color: #ffffff;
  }
}

.container {
  position: relative;
  width: 100%;
  height: 100vh;
}

.container-top {
  text-align: center;
  margin-bottom: 158rpx;

  image {
    width: 230rpx;
    margin-bottom: 16rpx;
  }
}

.phone-st {
  position: absolute;
  width: 100%;
  top: 0;
  .flex-center,
  button {
    height: 82rpx;
    border-radius: 60rpx;
    padding: 0 64rpx;
    box-shadow: 0px 12rpx 30rpx 0px rgba(72, 106, 239, 0.24);
    color: #ffffff;
    &:nth-child(2) {
      margin-bottom: 40rpx;
    }

    image {
      width: 48rpx;
      height: 48rpx;
      margin-right: 110rpx;
    }

    text {
      color: #fff;
    }
  }
}
.login-btns {
  position: absolute;
  width: 100%;
  bottom: 300rpx;
  .flex-center,
  button {
    height: 82rpx;
    border-radius: 60rpx;
    padding: 0 64rpx;
    box-shadow: 0px 12rpx 30rpx 0px rgba(72, 106, 239, 0.24);
    color: #ffffff;
    &:nth-child(2) {
      margin-bottom: 40rpx;
    }

    image {
      width: 48rpx;
      height: 48rpx;
      margin-right: 110rpx;
    }

    text {
      color: #fff;
    }
  }
}

.account-btns {
  view {
    color: rgba(0, 0, 0, 0.5);

    image {
      width: 32rpx;
      height: 32rpx;
    }
  }

  .go-home {
    font-size: 28rpx;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
  }
}

.agreement-popup {
  .main {
    padding: 48rpx 32rpx;
    border-radius: 16rpx;
    width: 622rpx;
    background: #fff;

    .main-title {
      text-align: center;
      margin-bottom: 48rpx;
      color: #333;
    }

    .main-content {
      margin-bottom: 48rpx;

      view {
        color: #636363;

        text {
          color: #486aef;
        }
      }
    }

    .main-btns {
      view {
        width: 272rpx;
        height: 72rpx;
        box-shadow: 4rpx 4rpx 12rpx 2rpx rgba(171, 181, 197, 0.06);
        border-radius: 36rpx;
        text-align: center;
        line-height: 72rpx;

        &:nth-child(1) {
          background: #f6f6f6;
          color: #333;
        }

        &:nth-child(2) {
          background: #486aef;
          color: #fff;
        }
      }
    }
  }
}
.bg-st {
  // position: absolute;
  width: 100%;
  height: 100%;
}

.header-title {
  width: calc(100% - 140rpx);
  padding-top: 382rpx;
  margin: 70rpx;
  .ch_title {
    font-size: 72rpx;
    font-family: DFPHaiBaoW12-GB-Regular, DFPHaiBaoW12-GB;
    font-weight: 400;
    color: #ffffff;
    line-height: 84rpx;
    height: 84rpx;
    width: 100%;
    text-align: center;
    word-spacing: 6rpx;
  }
  .en_title {
    font-size: 24rpx;
    font-family: FZZhengHeiS-B-GB-Regular, FZZhengHeiS-B-GB;
    font-weight: 400;
    color: #ffffff;
    // line-height: 23rpx;
    // height: 23rpx;
    width: 100%;
    text-align: center;
    word-spacing: 4rpx;
    padding-bottom: 150rpx;
  }
  .bg-main {
    width: 612rpx;
    height: 100rpx;
    background: #ffffff;
    border-radius: 50rpx 50rpx 50rpx 50rpx;
    font-size: 32rpx;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #000000;
  }
}
</style>
<style>
page {
  background: #fff;
}
</style>